<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 信息 -->
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <title>用户登录</title>
    <meta name="author" content="尘跃" />

    <!-- style -->
    <link rel="stylesheet" href="/css/old/style.css">
    <link rel="stylesheet" href="/css/old/style-fit.css">

    <!-- 百度统计 -->
    <script src="/js/tongji.js"></script>
    <!-- Google ADS -->
    <!-- <meta name="google-adsense-account" content="ca-pub-7556556693775855">
    <script src="/js/ads.js"></script> -->


    <style>


        body {
            width: 100dvw;
            height: 100dvh;
            display: flex;
            justify-content: center;
            align-items: center;
        }


        .width-4em {
            width: 4em;
        }


        .container-center {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;

            margin: auto;
            min-width: 10.5rem;
            max-width: 15rem;
            box-sizing: border-box;
            padding-top: 1em;
            transform: translateY(-10%);
            scale: 1.5;

            border: 2px solid;

            @media (min-width: 45rem) {
                scale: 2;
            }

            @media (min-width: 100rem) {
                scale: 2.5;
            }
        }

        .container-center input[type=text],
        .container-center input[type=password] {
            width: 100%;
        }


        .container-center-input {
            width: 90%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
        }

    </style>
</head>
<body>

    <form id="form-login" class="container-center">
        <div class="container-center-input">
            <label class="width-4em text-align-left" for="username">用户名：</label>
            <input id="input-username" type="text" name="username" required>
        </div>
        <div class="container-center-input">
            <label class="width-4em text-align-left" for="password">密码：</label>
            <input id="input-password" type="password" name="password" required>
        </div>
        <div>
            <input id="input-login" type="submit" value="登录"></button>
        </div>
    </form>

    <script src="/js/http.js"></script>
    <script>
        function clickLogin(e)
        {
            e.preventDefault();
            const username = document.getElementById("input-username").value;
            const password = document.getElementById("input-password").value;

            /* if (!username)
            {
                alert("用户名为空");
                return;
            }
            if (!password)
            {
                alert("密码为空")
                return;
            } */

            HTTP.request({
                method: "post",
                url: "/api/user/login",
                data: {
                    username: username,
                    password: password
                }
            }).then(response => {
                const result = response.data;
                const token = result.data;
                /* console.log(result); */
                if (result.type === "failure" || !token)
                {
                    alert("登录失败");
                    return;
                }

                /* axios.defaults.headers.common['token'] = token; */
                window.localStorage.setItem("token", token);
                window.localStorage.setItem("username", username);
                alert("登录成功");
                window.history.back();
            });
        }

        /* document.getElementById("input-login").addEventListener("click", clickLogin); */
        document.getElementById("form-login").addEventListener("submit", clickLogin);
    </script>

</body>
</html>




